<script setup>

import {HomeFilled} from "@element-plus/icons-vue";

// 暗黑模式
import { useDark, useToggle } from '@vueuse/core';

// useDark()可以获取当前的主题模式是不是暗黑模式，返回的是布尔值
const isDark = useDark();


// # 弹出框
import { ref} from 'vue'
import { ElMessage} from 'element-plus'

const popoverRef = ref()


// #文本
const textarea = ref('')
import {watch} from "vue";
//上传
import { UploadFilled } from '@element-plus/icons-vue'
// 设置在提交信息
let yesload = ref(false)
watch(textarea, (newValue) => {
  yesload.value = newValue.trim() !== '';
});

import { ElNotification } from 'element-plus'
import axios from 'axios'

const submit = () => {
  if (yesload.value) {
    // 发送 POST 请求
    axios.post('http://localhost:9090/api/feedback', {
      feedback: textarea.value // 将文本域的值作为反馈内容发送
    })
        .then(res => {
          console.log(res.data); // 输出响应数据
          // 弹出成功通知
          ElNotification({
            title: 'Success',
            message: '提交成功',
            type: 'success',
          });
          textarea.value = '';  // 清空文本域
          popoverRef.value.hide(); // 隐藏弹出框
        })
        .catch(err => {
          console.error('请求失败：', err);
          // 弹出错误通知
          ElNotification({
            title: 'Error',
            message: '提交失败',
            type: 'error',
          });
        });
  }
};
//页面切换
let page = ref(0)
const stringA = ref('');
const stringB = ref('');
// 实现Vue前端文字效果：如何让一段文本像是手动一个一个字打出来的 https://blog.csdn.net/weixin_43997331/article/details/135376110
function print() {
  console.log(stringA.value.length, stringB.value.length);
  if (stringA.value.length >= stringB.value.length) {
    // 退出递归
    return;
  } else {
    // stringA仍然比stringB短，进入下一次等待和递归
    setTimeout(() => {
      stringA.value += stringB.value.charAt(stringA.value.length);
      print(stringA, stringB);
    }, 50);
  }
}
const yesLogin = ref(false)
const failInfo = ref('')
// 登录：1 注册：2 忘记：3
const isLogin = ref(1)
//
function registerW() {
  isLogin.value = 2
  state.value = false
}
function forget() {
  isLogin.value = 3
  state.value = false

}
function login() {

  isLogin.value = 1
  state.value = false

}
// 忘记密码
const forgetemal = ref('')
const forgetcap = ref('')
function seedEmail() {
  state.value = true

  axios.post('http://localhost:9090/api/sendEmail', {
    email: forgetemal.value,
  }).then(res => {
    console.log(res.data); // 输出响应数据
    loginusername.value = '';  // 清空用户名
    loginpassword.value = '';  // 清空密码
    ElNotification({
      title: 'Success',
      message: '提交成功',
      type: 'success',
    });
    // 隐藏弹出框，如果有的话
    // popoverRef.value.hide();
  })
      .catch(err => {
        // 弹出错误通知
        ElNotification({
          title: 'Error',
          message: '提交失败',
          type: 'error',
        });
      });

}

// 表单
// 登录
import { useRouter } from 'vue-router';
const myrouter = useRouter();

const state = ref(false)
const loginusername = ref('')
const loginpassword = ref('')
function loginlogin() {
  state.value = true
  axios.post('http://localhost:9090/api/login', {
    username: loginusername.value,
    password: loginpassword.value
  })
      .then(res => {
        console.log(res.data); // 输出响应数据
        if (res.data.code === 0 && res.data.msg === 'success') {
          console.log('请求成功:', res.data);
          yesLogin.value = true
          myrouter.push('/speaker')
          // 在此处处理成功响应
        } else {
          console.log('请求失败:', res.data);
          // 在此处处理失败响应
          yesLogin.value = false
          failInfo.value = res.data.msg
        }
        loginusername.value = '';  // 清空用户名
        loginpassword.value = '';  // 清空密码
        // 隐藏弹出框，如果有的话
        // popoverRef.value.hide();
      })
      .catch(err => {

        console.log(err.data); // 输出响应数据
        // 弹出错误通知
        failInfo.value = err.data.msg
        yesLogin.value = false
      });}
// 忘记密码登录
function forgetforget() {
  state.value = true
  axios.post('http://localhost:9090/api/emailLogin', {
    email: forgetemal.value,
    captcha: forgetcap.value
  }).then(res => {
    console.log(res.data); // 输出响应数据
    if (res.data.code === 0 && res.data.msg === 'success') {
      console.log('请求成功:', res.data);
      yesLogin.value = true
      myrouter.push('/speaker')
      // 在此处处理成功响应
    } else {
      console.log('请求失败:', res.data);
      // 在此处处理失败响应
      yesLogin.value = false
      failInfo.value = res.data.msg
    }
    loginusername.value = '';  // 清空用户名
    loginpassword.value = '';  // 清空密码
    // 隐藏弹出框，如果有的话
    // popoverRef.value.hide();
  })
      .catch(err => {

        console.log(err.data); // 输出响应数据
        // 弹出错误通知
        failInfo.value = err.data.msg
        yesLogin.value = false
      });


}
// 注册
const registerusername = ref('')
const registerpassword = ref('')
const registercapt = ref('')

function registerregister() {
  state.value = true
  axios.post('http://localhost:9090/api/emailRegister', {
    email: forgetemal.value,
    capt: registercapt.value,
    username: registerusername.value,
    password: registerpassword.value,
  }).then(res => {
    console.log(res.data); // 输出响应数据
    if (res.data.code === 0 && res.data.msg === 'success') {
      console.log('请求成功:', res.data);
      yesLogin.value = true
      myrouter.push('/speaker')
      // 在此处处理成功响应
    } else {
      console.log('请求失败:', res.data);
      // 在此处处理失败响应
      yesLogin.value = false
      failInfo.value = res.data.msg

    }
    loginusername.value = '';  // 清空用户名
    loginpassword.value = '';  // 清空密码
    // 隐藏弹出框，如果有的话
    // popoverRef.value.hide();
  })
      .catch(err => {

        console.log(err.data); // 输出响应数据

        yesLogin.value = false
        failInfo.value = res.data.msg
      });
}

</script>

<template>
  <!--  <p class="text">{{ stringA }}</p>-->
  <!--  <button @click="print"><p class="text">点击开启动态效果</p></button>-->

  <!--  <button id="showPopup" onclick="showPopup()">弹出</button>-->
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <el-row class="header-1">
          <el-col :span="12" >
            <a href="/"><img class="img" src="../img/root-removebg-preview.png" alt=""></a>
          </el-col>
          <div class="flex-grow" />
          <a href="/"><el-button class="header-button" type="primary">
            <el-icon size="20"><HomeFilled /></el-icon>
            <span >主页</span>
          </el-button></a>
        </el-row>
      </el-header>

      <!--      # 设置横行-->
      <!--      <el-divider border-style="double" class="divider"/>-->
      <div class="bodyw">
        <div class="mainw">
      <div class="bodyi">
<!--        从这里开始修改&ndash;&gt;-->
        <div class="container" v-if="isLogin===1">
          <div class="drop">
            <div class="content" >
              <h2>登录</h2>
              <div class="form">
                <div class="inputBox">
                  <input type="text" placeholder="请输入用户名" class="input" v-model="loginusername">
                </div>
                <div class="inputBox">
                  <input type="password" placeholder="请输入密码" class="input" v-model="loginpassword">
                </div>


                <div class="inputBox">
                  <input type="submit" value="登录" @click="loginlogin" class="input">
                </div>

              </div>
              <p style="color: #ff0f5b" v-if="yesLogin===false&&state===true">{{failInfo}}</p>
            </div>

          </div>
          <a href="#" class="btns" @click="forget">忘记密码？</a>
          <a href="#" class="btns signup" @click="registerW">没有账号？立即注册</a>
        </div>

<!--        注册-->
        <div class="container" v-if="isLogin===2" >
          <div class="drop">
            <div class="content" >
              <h2>注册</h2>
              <div class="form">
                <div class="inputBox">
                  <input type="text" placeholder="请输入用户名" name="username" class="input" v-model="registerusername">
                </div>
                <div class="inputBox">
                  <input type="password" placeholder="请输入密码" name="password" class="input" v-model="registerpassword">
                </div>
                <div class="inputBox">
                  <input type="text" placeholder="请输入邮箱" name="email" class="input" v-model="forgetemal">
                </div>
                <div class="inputBox">
                  <input type="text" placeholder="请输入验证码" name="capt" class="input" v-model="registercapt">
                </div>

                <div class="inputBox">
                  <input type="submit" value="登录" class="input" @click="registerregister">
                </div>

              </div>
              <p style="color: #ff0f5b" v-if="yesLogin===false&&state===true">{{failInfo}}</p>
            </div>

          </div>
          <a href="#" class="btns" @click="forget">忘记密码？</a>
<!--          <a href="#" class="btns signup" @click="registerW">没有账号？立即注册</a>-->
          <a href="#" class="btns signup" @click="login">已有账号？立即登录</a>
          <a href="#" class="btns signup2" @click="seedEmail">发送验证</a>
        </div>

        <div class="container" v-if="isLogin===3">
          <div class="drop">
            <div class="content" >
              <h2>忘记密码</h2>
              <div class="form">
                <div class="inputBox">
                  <input type="text" placeholder="请输入邮箱" name="email" class="input" v-model="forgetemal">
                </div>
                <div class="inputBox">
                  <input type="text" placeholder="请输入验证码" name="password" class="input" v-model="forgetcap">
                </div>

                <div class="inputBox">
                  <input type="submit" value="登录" class="input" @click="forgetforget">
                </div>
              </div>
              <p style="color: #ff0f5b" v-if="yesLogin===false&&state===true">{{failInfo}}</p>
            </div>

          </div>
          <a href="#" class="btns" @click="login">已有账号？立即登录</a>
          <a href="#" class="btns signup" @click="registerW">没有账号？立即注册</a>
          <a href="#" class="btns signup2" @click="seedEmail">发送验证</a>
        </div>

      </div>
        </div></div>
    </el-container>
  </div>

</template>


<style scoped>
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.bodyi {
  display: flex;

  align-items: center;
  min-height: 40vh;
  background: #eff0f0;
}

.container {
  position: relative;
  right: -180px;
  display: flex;
  justify-content: center;
  align-items: center;


  .drop {
    position: relative;
    width: 420px;
    height: 420px;
    box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),
    25px 35px 20px rgba(0, 0, 0, 0.05),
    25px 30px 30px rgba(0, 0, 0, 0.05),
    inset -20px -20px 25px rgba(255, 255, 255, 0.9);
    transition: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50% 50% 30% 70% / 37% 45% 55% 63% ;

    .content {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      padding: 40px;
      gap: 15px;

      h2 {
        position: relative;
        color: #333;
        font-size: 1.5em;
      }

      .form {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;

        .inputBox {
          position: relative;
          width: 225px;

          box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
          inset -2px -5px 10px rgba(255, 255, 255, 1),
          15px 15px 10px rgba(0, 0, 0, 0.05),
          15px 10px 15px rgba(0, 0, 0, 0.025);
          border-radius: 25px;

          .input {
            border: none;
            outline: none;
            background: transparent;
            width: 100%;
            font-size: 1em;
            padding: 10px 15px;
          }

          input[type="submit"] {
            color: #fff;
            font-size: 1em;
            cursor: pointer;
            letter-spacing: 0.1em;
            font-weight: 500;
          }
        }

        .inputBox:last-child {
          width: 120px;
          background: #ff0f5b;
          box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
          15px 15px 10px rgba(0, 0, 0, 0.05),
          15px 10px 15px rgba(0, 0, 0, 0.025);
          transition: 0.5s;
        }

        .inputBox:last-child:hover {
          width: 150px;
        }

        .inputBox:before {
          content: '';
          position: absolute;
          top: 8px;
          left: 50%;
          transform: translateX(-50%);
          width: 65%;
          height: 5px;
          background: rgba(255, 255, 255, 0.5);
          border-radius: 5px;
        }
      }
    }
  }

  .drop:hover {
    border-radius: 50%;
  }

  .drop:before {
    content: '';
    position: absolute;
    top: 50px;
    left: 85px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.9;
  }

  .drop:after {
    content: '';
    position: absolute;
    top: 90px;
    left: 110px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.9;
  }


  .btns {
    position: absolute;
    right: -120px;
    bottom: 0;
    width: 120px;
    height: 120px;
    background: #c61dff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    line-height: 1.2em;
    letter-spacing: 0.1em;
    font-size: 0.8em;
    transition: 0.25s;
    text-align: center;
    box-shadow: inset 10px 10px 10px rgba(190, 1, 254, 0.05),
    15px 25px 10px rgba(190, 1, 254, 0.1),
    15px 20px 20px rgba(190, 1, 254, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
    border-radius: 28% 72% 66% 34% / 75% 48% 52% 25%;
  }

  .btns.signup {
    bottom: 150px;
    right: -200px;
    width: 80px;
    height: 80px;
    border-radius: 61% 39% 28% 72% / 47% 58% 42% 53% ;
    background: #01b4ff;

    box-shadow: inset 10px 10px 10px rgba(1, 180, 255, 0.05),
    15px 25px 10px rgba(1, 180, 255, 0.1),
    15px 20px 20px rgba(1, 180, 255, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
  }
  .btns.signup2 {
    bottom: 280px;
    right: -150px;
    width: 60px;
    height: 60px;
    border-radius: 61% 39% 28% 72% / 47% 58% 42% 53% ;
    background: #ff0f5b;

    box-shadow: inset 10px 10px 10px rgba(1, 180, 255, 0.05),
    15px 25px 10px rgba(1, 180, 255, 0.1),
    15px 20px 20px rgba(1, 180, 255, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
  }

  .btns:hover {
    border-radius: 50%;
  }

  .btns:before {
    content: '';
    position: absolute;
    top: 15px;
    left: 30px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.45;
  }

  .btns.signup:before {
    left: 20px;
    width: 15px;
    height: 15px;
  }
}
.text {
  font-size: 16px;
  font-family: 黑体;
  line-height: 1.5;
  text-indent: 2em;
}


*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

.bodyw {
  width: 100%;
  height: 95.8vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  background-color: #ecf0f3;
  color: #a0a5a8;
}

.mainw {
  position: relative;
  width: 1000px;
  min-width: 1000px;
  min-height: 600px;
  height: 600px;
  padding: 25px;
  background-color: #ecf0f3;
  box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
  border-radius: 20px;
  overflow: hidden;
}


.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  right: 20px;
  height: 35px;
  width: 50px;
  text-align: center;
  border: 0; /* 设置边框为0，这样就没有边框了 */
}
.li {
  text-indent: 20px;
  font-size: 12px;
  font-family: 华文仿宋;
}

a {
  text-decoration: none;
  font-family: 黑体;
  font-size: 15px;
}
h2 {
  font-size: 20px;
  font-family: "微软雅黑";
}

.header-1 {
  padding: 15px;
}
.header {
  height: 55px;
}
h1 {
  font-size: 35px;
  font-family:华文仿宋;
}

.header-button {

  height: 35px;
  width: 100px;
  text-align: center;
  border: 0; /* 设置边框为0，这样就没有边框了 */
}
.img {
  height: 35px;
  width: auto;
}
.flex-grow {
  flex-grow: 1;
}



</style>
